<script lang="ts" setup>
import { ref, toRef } from 'vue'
import DataFormPlus from '@/components/dataFormPlus/index.vue'
import { FormPlusData, FormPlusItem } from '@/components/dataFormPlus/props'
import { DataFormPlusType } from '@/interfaces/components/index'

const datas = ref<DataFormPlusType | null>(null)
const dataForms: FormPlusItem[] = [
  {
    label: '账号',
    key: 'username',
    type: 'Input',
  },
  {
    label: '密码',
    key: 'password',
    type: 'Input',
    wacthKey: ['username'],
    async wacthCallBack(proxys, values, self) {
      console.log(proxys)
      console.log(values)
      console.log(self)
      const [username] = values
      if (username === '123') {
        self.type = 'Select'
      }
      return []
    },
  },
]

const getParams = () => {
  // navie
  // datas.value?.navieValidator(() => {})
  // my
  // datas.value?.validator()
  console.log(datas.value?.update({ username: '123' }))
}
</script>

<template>
  <div class="">
    <DataFormPlus :options="dataForms" ref="datas" />
    <button @click="getParams">获取数据</button>
  </div>
</template>

<style lang="scss" scoped></style>
